
<template>
    <div class="recycleTable">
        <thead>
        <tr>
            <th>机构名称</th>
            <th>部门/科室</th>
            <th>废物类型</th>
            <th>废 物 量</th>
            <th>提交时间</th>
        </tr>
        </thead>
        <div class="content">
            <tbody class="anim" @mouseenter="mEnter" @mouseleave="mLeave">
            <tr v-for="(item,index) in dataSource" :key="index" :class="{on:index%2==0,off:index%2!=0}">
                <td :title="item.customerName" >{{item.customerName}}</td>
                <td>{{item.customerDepartmentName}}</td>
                <td>{{item.wasteName}}</td>
                <td>{{item.wasteOriginalValue}} {{item.priceUnit || ''}}</td>
                <td>{{item.createTime | formatDate}}</td>
            </tr>
            </tbody>
        </div>
    </div>
</template>

<script>
    // 政府部门大屏左3：实时提交收运记录
    import { getAction } from '@/api/manage'

    export default {
        name: 'recycleTable',
        props: {
            // 父组件传递过来的值
            areaCode: {
                type: String,
                default: ''
            },
            areaLevel: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                animate: false,
                dataSource: [],
                activeIndex: 0
            }
        },
        //格式化时间过滤器
        filters: {
            formatDate(data) {
                //    时间差 =现在的时间-过去的时间
                const time = Date.now() - new Date(data)
                /*
                  1秒 1000
                  1分钟 1000 * 60 60000
                  1小时 1000 * 60 * 60 3600000
                  1天 1000 * 60 * 60 * 24 86400000
                  1个月 1000 * 60 * 60 * 24 * 30 2592000000
                  1年 1000 * 60 * 60 * 24 * 365 31536000000
                */
                const times = [31536000000, 2592000000, 86400000, 3600000, 60000, 1000]
                const units = ['年前', '月前', '天前', '小时前', '分钟前', '秒前']
                for (let i = 0; i < times.length; i++) {
                    const res = time / times[i]
                    if (res >= 1) {
                        return Math.round(res) + units[i]
                    }
                }
            }
        },

        mounted() {
            //参数赋值
            this.getMedicalWasteData()
            this.timer1 = setInterval(this.scroll, 1000)
        },

        watch: {
            // 如果 `areaCode` 发生改变，这个函数就会运行
            areaCode: function(newValue, oldValue) {
                this.getMedicalWasteData()
            },
        },

        methods: {
            async getMedicalWasteData() {
                let params = {
                    areaCode: this.areaCode,
                    areaLevel: this.areaLevel
                }
                let url = `/hc/Statistical/getNewCustomerWaste`
                let res = await getAction(url, params)
                if (res && res.success) {
                    this.dataSource = res.result || [];
                }

            },
            //格式化时间

            scroll() {
                this.animate = !this.animate
                let that = this // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
                setTimeout(function() {
                    that.dataSource.push(that.dataSource[0])
                    that.dataSource.shift()
                    that.animate = !that.animate
                }, 1000)
            },
            mEnter() {
                clearInterval(this.timer1)
            },
            mLeave() {
                this.timer1 = setInterval(this.scroll, 1000)
            },
        },
        destroyed() {
            clearInterval(this.timer1)
        }
    }
</script>

<style lang="less">

    .anim {
        transition: all 2s;
    }

    .recycleTable {

        table-layout: fixed;
        width: 100%;

        thead {
            display: table;
            width: 100%;
            table-layout: fixed;
            height: 0.2rem;
            color: #52E2FF;
            font-size: 0.19rem;

            tr {
                display: table-row;
                vertical-align: inherit;
                text-align: center;
            }


        }

        .content {

            width: 100%;
            text-align: center;

            overflow: hidden;
            color: #FFFFFF;

            .off {
                /*background-color: #030C44;*/
                background-color: rgba(255,255,255,0.3);
            }

            .on {

            }

            tbody {
                text-align: center;
                display: block;
                height: 6.5rem;
                overflow-y: hidden;

                tr {
                    line-height: 0.6rem;
                    display: table;
                    width: 100%;
                    table-layout: fixed;
                }

                td {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;

                }
            }

        }

    }
</style>
